<template>
    <div class="plugin_content">
        <div class="plugin_header_content">
            <div style="width: 300px;margin-right: 20px">
                <el-input v-model="searchValue" @input="searchInput" prefix-icon="el-icon-search"
                          placeholder="输入插件名称搜索"></el-input>
            </div>
            <el-button type="primary" size="small" @click="addPlugin">添加插件</el-button>
        </div>

        <el-table
                class="plugin_table_content"
                :data="tableData"
                :row-class-name="tableRowClassName"
                height="400"
                border
                v-loading="isLoading">

            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="插件logo"
                    width="180">
                <template scope="scope">
                    <el-image style="width: 50px;height: 50px;" :src="getImage(scope.row.logoFileName)"/>
                </template>
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="插件名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="version"
                    label="版本号">
            </el-table-column>

            <el-table-column
                    prop="date"
                    label="发布日期"
                    width="180">
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="size"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
        </el-pagination>
        <EditPluginComp
                title="添加插件"
                :show="showEditPluginDialog"
                @save="savePlugin"
                @before-close="handleClose"></EditPluginComp>
    </div>
</template>

<script>
    import EditPluginComp from "../components/EditPluginComp";

    export default {
        components: {
            EditPluginComp
        },
        data() {
            return {
                tableData: [],
                page: 1,
                size: 10,
                total: 100,
                searchValue: null,
                isLoading: false,
                showEditPluginDialog: false
            }
        },
        mounted() {
            this.loadPluginData()
        },
        methods: {
            searchInput(value) {
                this.loadPluginData()
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleClose(done) {
                this.showEditPluginDialog = false
            },
            handleEdit(index, data) {

            },
            handleDelete(index, data) {
                this.$confirm('此操作将永久删除该插件,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    setTimeout(() => {
                        axios.get('/api/plugin/deletePlugin?id=' + data.id)
                            .then((res) => {
                                if (res.data.code === 1) {
                                    this.$Toast.successToast(res.data.msg)
                                    this.loadPluginData()
                                    return
                                }
                                this.$Toast.errorToast(res.data.msg)
                            })
                            .catch((error) => {
                                this.$Toast.errorToast('请求服务器失败!')
                            })
                    })
                })
            },
            handleSizeChange(size) {
                this.size = size
            },
            handleCurrentChange(page) {
                this.page = page
                this.loadPluginData()
            },
            loadPluginData() {
                this.isLoading = true
                setTimeout(() => {
                    const par = {
                        "page": this.page,
                        "size": this.size,
                        "likeParameter": {
                            "name": this.searchValue
                        }
                    }
                    axios.post("/api/plugin/pagingQuery", par)
                        .then((res) => {
                            this.isLoading = false
                            if (res.data.code === 1) {
                                this.tableData = res.data.data.pluginData
                                this.total = res.data.data.total
                                return
                            }
                            this.tableData = []
                            this.total = 0
                        })
                        .catch((error) => {
                            this.isLoading = false
                        })
                }, 500)
            },
            addPlugin() {
                this.showEditPluginDialog = true
            }, getImage(logoFileName) {
                const env = process.env.NODE_ENV
                console.log('当前环境:'+env)
                if (env==='production'){
                    return '/file/getImage?fileName=' + logoFileName

                }else {
                    return '/api/file/getImage?fileName=' + logoFileName
                }
            },
            savePlugin(plugin) {
                if (!plugin.pluginFileName) {
                    this.$Toast.errorToast("请上传插件!")
                    return
                }
                if (!plugin.logoFileName) {
                    this.$Toast.errorToast("请上传插件logo!")
                    return
                }
                if (!plugin.name) {
                    this.$Toast.errorToast("请输入插件名称!")
                    return
                }
                if (!plugin.version) {
                    this.$Toast.errorToast("请输入插件版本号!")
                    return
                }
                setTimeout(() => {
                    axios.post('/api/plugin/addPlugin', plugin)
                        .then((res) => {
                            this.showEditPluginDialog = false
                            if (res.data.code === 1) {
                                this.$Toast.successToast(res.data.msg)
                                return
                            }
                            this.$Toast.errorToast(res.data.msg)
                        })
                        .catch((error) => {
                            this.showEditPluginDialog = false
                        })
                })
            }
        },
    }
</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .plugin_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .plugin_header_content {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 70px;
    }

    .plugin_table_content{
        height: 500px;
    }

</style>